<template>
      <div>
            <div class="right-wrapper content-lianxi-fenlei page-mydash">
                <div class="page-titles">
                    <div class="col-md-5">
                        <h3 class="text-themecolor">分类</h3>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-4 col-md-4">
                            <a class="a-card" href="#">
                                <div class="card card-1">
                                    <div class="card-body">
                                        <h4 class="card-title"><a @click="quicktest()">快速智能练习</a></h4>
                                        <p class="card-text">覆盖五大专项，综合智能组卷，提升你的综合能力</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <a class="a-card" href="javascript:void(0)" @click="showZx()">
                                <div class="card card-2">
                                    <div class="card-body">
                                        <h4 class="card-title"><a>专项智能练习</a></h4>
                                        <p class="card-text">覆盖五大专项，综合智能组卷，提升你的综合能力</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <a class="a-card" href="javascript:void(0)" @click="comptest()">
                                <div class="card card-3">
                                    <div class="card-body">
                                        <h4 class="card-title"><a>组卷模考</a></h4>
                                        <p class="card-text">芝麻为你生成与目标考试考点范围、难度分布完全匹配的模考试卷</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-4">
                            <a class="a-card"  href="javascript:void(0)" @click="showRealDialog()">
                                <div class="card card-4">
                                    <div class="card-body">
                                        <h4 class="card-title"><a>真题模考</a></h4>
                                        <p class="card-text">芝麻教育已收录近十年真题</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <a class="a-card" href="javascript:void(0)" @click="spirittest()">
                                <div class="card card-5">
                                    <div class="card-body">
                                        <h4 class="card-title"><a>考前冲刺</a></h4>
                                        <p class="card-text">提供由命题专家和业界名师编制的独家密卷、以及高频考点练习</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <a class="a-card" href="javascript:void(0)" @click="linkToLastTest()">
                                <div class="card card-6">
                                    <div class="card-body">
                                        <h4 class="card-title"><a>继续上次学习</a></h4>
                                        <p class="card-text">当前没有未完成的练习</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="dialog">
              <el-dialog title="选择真题" :visible.sync="realDlg" >
                  <el-tabs v-model="cateActiveTab">
                      <el-tab-pane :label="row.title"  v-for="(row,key) in test_categories" :key="row.id" :name="row.id+''">

                          <el-table
                              :show-header="false"
                              :data="libs[row.id]"
                              style="width: 100%">
                              <el-table-column
                                  prop="title"
                                  width="800">
                              </el-table-column>
                              <el-table-column
                                  >
                                  <template slot-scope="scope">
                                      <el-button
                                          size="mini"
                                          type="primary"
                                          icon="el-icon-edit-outline"
                                          @click="realtest(scope.row)">
                                      </el-button>
                                  </template>
                              </el-table-column>
                          </el-table>
                      </el-tab-pane>
                  </el-tabs>
              </el-dialog>
                <el-dialog title="选择冲刺试题" :visible.sync="spiritDlg" >
                    <el-table
                        :show-header="false"
                        :data="spiritTests"
                        style="width: 100%">
                        <el-table-column
                            prop="title"
                            width="800">
                        </el-table-column>
                        <el-table-column
                        >
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-edit-outline"
                                    @click="realtest(scope.row)">
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-dialog>
            </div>

          <div class="dialog">
              <el-dialog title="单项练习" :visible.sync="dxDlg" >
                  <el-tree
                      :data="point_categories"
                      :props="defaultProps"
                      node-key="id"
                      :expand-on-click-node="false"
                      :render-content="renderContent"
                      :accordion="true"
                      >
                  </el-tree>
              </el-dialog>
          </div>
        </div>
</template>
<script>
    import http from "../../lib/http"
    import tree from "../../lib/tree"
    export default {
        data : function(){
            return {
                realDlg : false,
                dxDlg : false,
                spiritDlg : false,
                test_categories : [],
                point_categories : [],
                defaultProps: {
                    children: 'children',
                    label: 'title'
                },
                cateActiveTab : "",
                spiritTests : [],
                libs : {},
                lastTestLink : ''
            }
        },
        methods : {

            renderContent : function(h,{node, data, store} ) {
                console.log(node.label)
                return (
                    <div style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px">
                        <span>
                            <span>{node.label}</span>
                        </span>
                    <span>
                        <el-button type="text" on-click={()=>this.zx15(data.id)}>来15道</el-button>
                    </span>
                </div>
                );
            },
            showRealDialog : function(){
                this.realDlg = true
                this.getAllCategory()
            },
            showZx : function () {
              this.dxDlg = true
            },

            logout : function(d){
                var self = this
                this.$confirm("确认退出登录吗?").then(function(){
                    localStorage.removeItem('ms_username')
                    localStorage.removeItem('access_token')
                    localStorage.removeItem("userinfo")
                    self.$router.push('/login');
                })

            },
            zx15:function(point_cate_id){
                var self = this
                http.post(this,"cs_test_libraries_item/randzx/15",{point_id:point_cate_id}).then(function(res){
                    var simu_id = res.data.data
                    location.href = '#/zxtest-'+simu_id
                })
            },
            quicktest : function(){
                var self = this
                http.post(this,"cs_test_libraries_item/rand/15").then(function(res){
                    var simu_id = res.data.data
                    location.href = '#/quicktest-'+simu_id
                })
            },
            realtest : function(row){
                //alert(row.id)
                var self = this
                http.post(this,"cs_test_libraries_item/real/generate",{test_id:row.id}).then(function(res){
                    var simu_id = res.data.data
                    location.href = '#/realtest-'+simu_id
                })
            },
            comptest : function(){
                var self = this
                http.post(this,"cs_test_libraries_item/comp/generate").then(function(res){
                    var simu_id = res.data.data
                    //alert(simu_id)
                    location.href = '#/comptest-'+simu_id
                })
            },
            singletest : function(){
                alert(1)
            },
            spirittest: function () {
                var self = this
                this.spiritDlg = true
                http.get(this,"cs_test_libraries_item/spirit/list").then(function(res){
                    if(res.data.total > 0){
//                        var r = Math.round(Math.random() * (res.data.total - 1))
//                        var simu_id = res.data.data[r].id
                        self.spiritTests = res.data.data
                    }
                    else{
                        self.$message.warning("当前没有考前冲刺试题")
                    }
                })
            },
            getAllCategory : function(){
                var self = this;

                http.get(self,"test_categories/code/CS_ROOT").then((res) => {
                    var response = res.data
                    if (response.code == "ok") {
                        response.data.shift()
                        self.test_categories = response.data
                        self.cateActiveTab = response.data[0].id + ""
                        //console.log(self.test_categories)
                    }
                })
            },
            getPointCategory : function(){
                var self = this;
                http.get(self,"point_categories/code/CS_ROOT").then(function(res){
                    var response = res.data
                    if (response.code == "ok") {
                        self.point_categories = tree.make(response.data,"pid",response.data[0].id,"children")
                        console.log("~~~~~~")
                        console.log(JSON.stringify(self.point_categories))
                    }
                })
            },
            getAllTestLibraries : function(){
                var self = this;
                var params = {
                    skip : 0,
                    limit : 99999999
                }
                http.get(self,"cs_test_libraries",params).then((res) => {
                    var response = res.data
                    if (response.code == "ok") {
                        if (!response.data) {
                            self.libs = {}
                        }
                        else{
                            for(var i=0,j=response.data.length;i<j;i++){
                                response.data[i].hard_rate *= 1
                                self.libs[response.data[i].pq_test_category_id] = self.libs[response.data[i].pq_test_category_id] || []
                                self.libs[response.data[i].pq_test_category_id].push(response.data[i])
                            }
                        }
                    }
                    console.log(self.libs)
                })
            },
            getLastTest : function () {
                var self = this
                http.get(this,"cs_last_test").then(function (res) {
                    var data = res.data.data
                    //alert(data.simu_type)
                    switch(data.simu_type){
                        case "0":
                            self.lastTestLink = '#/quicktest-'+data.id
                        break;
                        case "1":
                            self.lastTestLink = '#/realtest-'+data.id
                        break;
                        case "2":
                            self.lastTestLink = '#/zxtest-'+data.id
                        break;
                        case "3":
                            self.lastTestLink = '#/comptest-'+data.id
                        break;
                    }
                })
            },
            linkToLastTest : function () {
                //alert(this.lastTestLink)
                location.href = this.lastTestLink;
            }
        },
        created : function(){
            var self = this
            http.alive(this,function(){
                self.getAllTestLibraries()
                self.getPointCategory()
                self.getLastTest()
            },true)
        },
    }
</script>
